<template>
    <view class="container">
        <view class="myearning">
            <view class="now">当前收益</view>
            <view class="nowmoney">146.00</view>
            <view class="havemoney"
                >账户余额：<text class="money">￥1546.00</text></view
            >
            <image
                class="knowmore"
                src="/static/earnings/knowmore.png"
                mode="scaleToFill"
            />
            <image
                class="withdraw"
                src="/static/earnings/withdraw.png"
                mode="scaleToFill"
            />
        </view>
        <view class="allmoney">
            <image
                class="all"
                src="/static/earnings/all.png"
                mode="scaleToFill"
            />
            <view class="content">
                <view class="item">
                    <view class="havemoney">146.00</view>
                    <view class="message">已结算</view>
                </view>
                <view class="line"></view>
                <view class="item">
                    <view class="havemoney">0.00</view>
                    <view class="message">未结算</view>
                </view>
            </view>
        </view>
        <view class="allmoney">
            <image
                class="all"
                src="/static/earnings/today.png"
                mode="scaleToFill"
            />
            <view class="content">
                <view class="item">
                    <view class="todaymoney">146.00</view>
                    <view class="message">已结算</view>
                </view>
                <view class="line"></view>
                <view class="item">
                    <view class="todaymoney">0.00</view>
                    <view class="message">未结算</view>
                </view>
            </view>
        </view>
        <view class="allmoney">
            <image
                class="all"
                src="/static/earnings/week.png"
                mode="scaleToFill"
            />
        </view>
    </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: $body-bc;
    color: $content-color;
    padding: 28rpx;
    .myearning {
        position: relative;
        padding: 39rpx 23rpx 31rpx 53rpx;
        // background: url('/static/background/earning_banner.png') center center no-repeat;
        background-size: 100% 100%;
        margin-bottom: 23rpx;
        .now {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 24rpx;
            color: #3a75c0;
            line-height: 40rpx;
        }
        .nowmoney {
            font-family: Source Han Sans CN;
            font-weight: 700;
            font-size: 48rpx;
            color: #ffa73f;
            line-height: 80rpx;
            margin-bottom: 62rpx;
        }
        .havemoney {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 24rpx;
            color: #3a75c0;
            line-height: 40rpx;
        }
        .money {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 30rpx;
            color: #ffa73f;
            line-height: 40rpx;
        }
        .knowmore {
            position: absolute;
            top: 23rpx;
            right: 34rpx;
            width: 32rpx;
            height: 32rpx;
        }
        .withdraw {
            position: absolute;
            bottom: 46rpx;
            right: 23rpx;
            width: 150rpx;
            height: 47rpx;
        }
    }
    .allmoney {
        background: #112959;
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 23rpx;
        .all {
            height: 70rpx;
        }
        .content {
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: space-between;
            .item {
                margin: 46rpx 78rpx;
            }
            .line {
                width: 1rpx;
                height: 110rpx;
                background: linear-gradient(
                    0deg,
                    rgba(17, 41, 89, 0.01),
                    rgba(1, 179, 238, 0.66),
                    rgba(17, 41, 89, 0.02)
                );
                border-radius: 1rpx;
                opacity: 0.68;
            }
            .havemoney {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 38rpx;
                color: #1eebe9;
                line-height: 54rpx;
            }
            .todaymoney {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 38rpx;
                color: #00c1ff;
                line-height: 54rpx;
            }
            .message {
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 24rpx;
                color: #3a75c0;
                line-height: 54rpx;
            }
        }
    }
}
</style>
